@import '~@angular/material/_theming';

mat-card {
  margin: 10px;
}

.nav-title {
  a {
    font-size: 16px;
    text-decoration: none;
  }
}
.nav-desc {
  max-height: 100px;
  overflow: hidden;
}

.nav-item {
  height: 280px;
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: default;

  &:hover {
    transform: translate(0, -8px);
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.16);
  }

  &-mask {
    position: relative;
    height: 144px;
    width: calc(100% + 32px);
    top: -16px;
    left: -16px;
    border-radius: 4px 4px 0 0;
    background: #1956ef;
    background: linear-gradient(90deg, #1956ef, #30a0f8);
  }

  &-logo {
    height: 144px;
    width: 56%;
    margin: 0 22%;
    text-align: center;
    background: {
      repeat: no-repeat;
      size: contain;
      position: center;
      image: url(/assets/logo.png);
    }
  }
}
